<script setup lang="ts">
import {
  Menu as IconMenu,
  Message,
  Setting,
  Plus,
} from "@element-plus/icons-vue";
import type { UploadInstance, UploadProps, UploadUserFile } from "element-plus";
import { ref } from "vue";
const uploadRef = ref<UploadInstance>();

const submitUpload = () => {
  uploadRef.value!.submit();
};
const fileList = ref<UploadUserFile[]>([]);
const dialogImageUrl = ref("");
const dialogVisible = ref(false);

const handleRemove: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
  // <-当前文件？->{"name":"plant-1.png","url":"/images/plant-1.png","uid":1753192244769,"status":"success"}<-->
  console.log("<-当前文件？->" + JSON.stringify(uploadFile) + "<-->");
  // <-文件列表？->[{"name":"food.jpeg","url":"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100","uid":1753192244768,"status":"success"},{"name":"food.jpeg","url":"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100","uid":1753192244770,"status":"success"},{"name":"plant-2.png","url":"/images/plant-2.png","uid":1753192244771,"status":"success"},{"name":"food.jpeg","url":"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100","uid":1753192244772,"status":"success"},{"name":"figure-1.png","url":"/images/figure-1.png","uid":1753192244773,"status":"success"},{"name":"food.jpeg","url":"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100","uid":1753192244774,"status":"success"},{"name":"figure-2.png","url":"/images/figure-2.png","uid":1753192244775,"status":"success"}]<-->
  console.log("<-文件列表？->" + JSON.stringify(uploadFiles) + "<-->");
};

const handlePictureCardPreview: UploadProps["onPreview"] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!;
  dialogVisible.value = true;
};
</script>
<template>
  <div style="width: 100%; height: 100%; min-width: 900px">
    <el-container
      style="background-color: antiquewhite; width: 100%"
      direction="vertical"
    >
      <!-- *****【Header Start】******************************************************* -->
      <!-- <el-header> 默认是会有Padding值的，如果不显示设置，则不会 -->
      <el-header
        style="text-align: right; font-size: 12px; padding: 0; height: 60px"
      >
        <div class="style-header">
          <span class="style-header-span">这里是占位 </span>
          <!-- *****【下拉菜单，Start】******************************************************* -->
          <el-dropdown>
            <span>
              <el-icon style="margin-right: 8px; margin-top: 1px">
                <setting />
              </el-icon>
              <span>菜单</span>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>View</el-dropdown-item>
                <el-dropdown-item>Add</el-dropdown-item>
                <el-dropdown-item>Delete</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <!-- *****【下拉菜单，End】******************************************************* -->
        </div>
      </el-header>
      <!-- *****【Header End】******************************************************* -->
      <el-container style="background-color: transparent; width: 100%">
        <!-- *****【Aside Start】******************************************************* -->
        <el-aside width="210px">
          <el-scrollbar>
            <span class="style-aside">Aside </span>
          </el-scrollbar>
        </el-aside>
        <!-- *****【Aside End】******************************************************* -->
        <!-- *****【Main Start】******************************************************* -->
        <el-main
          style="
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            background-color: cadetblue;
          "
        >
          <!-- 
        disabled 禁止上传；   
          -->
          <el-upload
            ref="uploadRef"
            v-model:file-list="fileList"
            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :auto-upload="false"
          >
            <el-icon><Plus /></el-icon>
          </el-upload>
          <el-button class="ml-3" type="success" @click="submitUpload">
            upload to server
          </el-button>
        </el-main>
        <!-- *****【Main End】******************************************************* -->
      </el-container>
      <!-- ************************************************************ -->
      <el-footer
        style="
          background-color: burlywood;
          height: 60px;
          padding: 0;
          width: 100%;
        "
      >
        <div class="style-footer">Footer</div>
      </el-footer>
    </el-container>
  </div>
  <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>
</template>
<style scoped>
.style-root {
  width: 100%;
  height: 100%;
  background-color: antiquewhite;
}
.style-header {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: azure;
  padding-left: 16px;
  padding-right: 16px;
}
.style-header-span {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: azure;
}
.style-footer {
  width: 100%;
  height: 100%;
  background-color: blueviolet;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: start;
  padding-left: 16px;
  padding-right: 16px;
  font-size: 16px;
  color: #ffffff;
}
.style-aside {
  width: 210px;
  flex: 1;
  background-color: darkgrey;
}
.style-main {
  width: 100%;
  background-color: cadetblue;
}
</style>
